<template>
  <nav>
    <b
      v-for="item of types"
      :class="{ active: activeType === item.code }"
      @click="toggleType(item.code)"
    >
      {{ item.text }}
    </b>
  </nav>
  <div class="Home">
    <ul v-if="newsList.length > 0">
      <li
        v-for="(item, index) of newsList"
        :key="item.docid"
      >
        <img height="100" :src="item.imgsrc" alt="">
        <h3>{{ item.title }}</h3>
      </li>
    </ul>
    <div style="font-size: 100px">{{ loadMoreText }}</div>
  </div>
</template>

<script>
import jsonp from "jsonp"

export default {
  name: "Home",
  data() {
    return {
      newsList: [],
      types: [
        { text: "电视", code: "BA10TA81wangning" },
        { text: "电影", code: "BD2A9LEIwangning" },
        { text: "明星", code: "BD2AB5L9wangning" },
        { text: "音乐", code: "BD2AC4LMwangning" },
        { text: "体育", code: "BA8E6OEOwangning" },
        { text: "财经", code: "BA8EE5GMwangning" },
        { text: "军事", code: "BAI67OGGwangning" },
        { text: "军情", code: "DE0CGUSJwangning" },
      ],
      activeType: "BAI67OGGwangning"
    }
  },
  computed: {
    loadMoreText() {
      return this.newsList.length === 0 ? "暂无数据": "加载更多"
    }
  },
  watch: {
    activeType(curr, before) {
      // console.log(curr, "======", before)
      jsonp(
        `https://3g.163.com/touch/reconstruct/article/list/${curr}/0-10.html`,
        {
          name: "artiList"
        },
        (err, res) => {
          // console.log(err)
          this.newsList = res[curr]
          console.log(this.newsList)
        })
    },
  },
  created() {
    jsonp(
      "https://3g.163.com/touch/reconstruct/article/list/BAI67OGGwangning/0-10.html",
      {
        name: "artiList"
      },
      (err, res) => {
        // console.log(err)
        this.newsList = res["BAI67OGGwangning"]
        console.log(this.newsList)
      })
  },
  mounted() {
    //
    document.body.onscroll = function () {
      console.log(document.documentElement.scrollTop)
    }
    // 事件委托
    // document.querySelector("ul").onclick = function () {
    //   console.log(this)
    // }
  },
  methods: {
    toggleType(code) {
      this.activeType = code
      // ajax
    }
  }
}

// Object.defineProperty(obj, prop, { set: xxx, get: '' })
// Proxy({})
</script>

<style scoped lang="stylus">
nav b {
  margin-right 10px
  font-size 24px

  &.active {
    color red
  }
}

li {
  border-bottom 1px solid #333
}
</style>
